<template>
  <div class="code">

    <a-list item-layout="vertical" size="large" :data-source="props.codeList">
      <template #footer>
        <div></div>
      </template>
      <template #renderItem="{ item }">
        <a-list-item key="item.title">
          <a-list-item-meta>
            <template #title>
              <a :href="item.href">{{ item.user.userName }}</a>
              <span style="margin-left: 30px;"></span>
              <a-tag color="#2db7f5">{{ item.user.userRole }} </a-tag>
            </template>
            <template #avatar>
              <a-avatar :src="item.user.userAvatar" />
            </template>
            <template #description>
              <div >
<!--                <h2>{{item.title}}</h2>-->
                <a-typography-title :level="5" style="white-space: nowrap;margin: 10px;">{{ item.title }}</a-typography-title>
                <v-md-preview  :text="item.content" height="150"></v-md-preview>
<!--                <MdPreview :editorId="id" :modelValue="item.content"  />-->
<!--                <MdCatalog :editorId="id" :scrollElement="scrollElement" />-->
                <div style="display: flex;justify-content: space-between;margin: 10px">
                  <span>
                    <a-tag v-for="i in item.tagList" :key="i" color="default"> {{i}} </a-tag>
                  </span>
                  <span>{{ formatDateTime(item.createTime) }}</span>
                </div>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults,reactive } from "vue";
// import { MdPreview, MdCatalog } from 'md-editor-v3';
// import 'md-editor-v3/lib/preview.css';
// const id = 'preview-only';
const scrollElement = document.documentElement;
interface Prpos {
  codeList: any[];
}
const props = withDefaults(defineProps<Prpos>(), {
  codeList: () => [],
});
function formatDateTime(date: string): string {
  const datetime = new Date(date);
  const year = datetime.getFullYear();
  const month = String(datetime.getMonth() + 1).padStart(2, '0');
  const day = String(datetime.getDate()).padStart(2, '0');
  const hour = String(datetime.getHours()).padStart(2, '0');
  const minute = String(datetime.getMinutes()).padStart(2, '0');
  const format = `${year}-${month}-${day} ${hour}:${minute}`;
  return format;
}
</script>

<style scoped lang="less">
.code {
  width: 100%;
  /deep/ .github-markdown-body {
    margin: 0px;
    padding: 1px;
  }
}
</style>